<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">           <!-- 设置编码格式 -->
    <title>Camera Management System</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

</head>
<body>

<div class="container my-2">
    <h1>共享照相机管理平台</h1>

    <a th:href = "@{/showNewCameraForm}" class="btn btn-primary btn-sm mb-3"> 添加相机 </a>

    <!-- 搜索框 -->
    <form class="form-inline my-2 my-3"
    th:action="@{/page/{pageNo}(pageNo=${currentPage},sortField=${'id'},sortDir=${'asc'})}"
    th:method="get">
    <input name="pageNo" type="hidden" th:value="1"/>
    <input name="sortField" type="hidden" th:value="id"/>
    <input name="sortDir" type="hidden" th:value="asc"/>
    <input class="four-column-mr-sm-2" name="CameraState" type="search" placeholder="查询相机状态"
            aria-label="Search">
    <button class="bth btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
    <table border="1" class = "table table-striped table-responsive-md">
    </form>

        <thead>
        <tr>
            <th>
                <a th:href="@{'/page/' + ${currentPage} + '?sortField=cameraName&sortDir=' + ${reverseSortDir}}">
                    相机名称</a>
            </th>
            <th>
                <a th:href="@{'/page/' + ${currentPage} + '?sortField=brand&sortDir=' + ${reverseSortDir}}">
                    相机品牌</a>
            </th>
            <th>
                <a th:href="@{'/page/' + ${currentPage} + '?sortField=cameraType&sortDir=' + ${reverseSortDir}}">
                    相机类型</a>
            </th>
            <th>
                <a th:href="@{'/page/' + ${currentPage} + '?sortField=state&sortDir=' + ${reverseSortDir}}">
                    相机状态</a>
            </th>
            <th>
                <a th:href="@{'/page/' + ${currentPage} + '?sortField=rent&sortDir=' + ${reverseSortDir}}">
                    相机租金</a>
            </th>
            <th> 行动 </th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="camera : ${listCamera}">
            <td th:text="${camera.cameraName}"></td>
            <td th:text="${camera.brand}"></td>
            <td th:text="${camera.cameraType}"></td>
            <td th:text="${camera.state}"></td>
            <td th:text="${camera.rent}"></td>
            <td> <a th:href="@{/showFormForUpdate/{id}(id=${camera.id})}" class="btn btn-primary">修改</a>
                <a th:href="@{/deleteCamera/{id}(id=${camera.id})}" class="btn btn-danger">删除</a>
            </td>
        </tr>
        </tbody>
    </table>

    <div th:if = "${totalPages > 1}">
        <div class = "row col-sm-10">
            <div class = "col-sm-3">
                Total Rows: [[${totalItems}]]
            </div>
            <div class = "col-sm-5">
					<span th:each="i: ${#numbers.sequence(1, totalPages)}">
						<a th:if="${currentPage != i}" th:href="@{'/page/' + ${i}+ '?sortField=' + ${sortField} + '&sortDir=' + ${sortDir}}">[[${i}]]</a>
						<span th:unless="${currentPage != i}">[[${i}]]</span>  &nbsp; &nbsp;
					</span>
            </div>
            <div class = "col-sm-1">
                <a th:if="${currentPage < totalPages}" th:href="@{'/page/' + ${currentPage + 1}+ '?sortField=' + ${sortField} + '&sortDir=' + ${sortDir}}">Next</a>
                <span th:unless="${currentPage < totalPages}">Next</span>
            </div>

            <div class="col-sm-1" style="margin-left: 10px;">
                <a th:if="${currentPage < totalPages}" th:href="@{'/page/' + ${totalPages}+ '?sortField=' + ${sortField} + '&sortDir=' + ${sortDir}}">Last</a>
                <span th:unless="${currentPage < totalPages}">Last</span>
            </div>
        </div>
    </div>

</div>



</body>
</html>
